<template>
  <div id="app">
    <el-container>
      <el-header
        style="color: #fff; background-color: #252a2f; border-bottom: 1px solid rgba(255,255,255,0.3);"
      >Anim</el-header>
      <el-main style="width: 100%; height: 600px; background-color: #252a2f;">
        <el-container style="height: 100%;">
          <el-aside style="margin: 0 auto; width: 990px;">
            <el-container style="margin-top: 100px;">
              <el-aside style="width: 610px; color: #fff;">
                <h2>Anim</h2>
                <h3>nix.anim</h3>
              </el-aside>
              <el-aside
                style="width: 380px; padding: 30px; background-color: #fff; border-radius: 1px"
                width="380px"
              >
                <el-form
                  ref="formLogin"
                  :model="modelLogin"
                  status-icon
                  :rules="rulesLogin"
                  label-width="0px"
                >
                  <el-form-item label prop="username">
                    <el-input
                      v-model="modelLogin.username"
                      ref="username"
                      placeholder="用户名"
                      tabindex="1"
                      maxlength="50"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label prop="password">
                    <el-input
                      v-model="modelLogin.password"
                      type="password"
                      placeholder="密码"
                      tabindex="2"
                      maxlength="50"
                      @keyup.enter.native="onSubmitLogin"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      :loading="isButtonLoadingLogin"
                      @click="onSubmitLogin"
                    >登陆</el-button>
                  </el-form-item>
                </el-form>
              </el-aside>
            </el-container>
          </el-aside>
        </el-container>
      </el-main>
      <el-footer
        style="width: 100%; height: 180px; background-color: #373d41; color: #999;"
      >&copy; nix.anim</el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import { getAPI } from './assets/js/resources.js'
axios.defaults.withCredentials = true
var Qs = require('qs')

export default {
  name: 'App',
  data() {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      modelLogin: {
        username: '',
        password: ''
      },
      rulesLogin: {
        username: [{ validator: checkUsername, trigger: 'blur' }],
        password: [{ validator: checkPassword, trigger: 'blur' }]
      },
      redirectUrl: '',
      isButtonLoadingLogin: false
    }
  },
  methods: {
    onSubmitLogin() {
      // 发送 post 请求
      this.$refs.formLogin.validate(valid => {
        if (valid) {
          this.isButtonLoadingLogin = true
          var that = this
          axios({
            method: 'post',
            url: getAPI('API_POST_LOGIN'),
            // 序列化为&格式
            data: Qs.stringify(that.modelLogin)
          })
            .then(function(response) {
              if (response.data.status === 200) {
                // 写入Cookie
                that.$cookies.set('NIX_ANIM_USER_SESSION', response.data.data)
                that.isButtonLoadingLogin = false
                if (that.redirectUrl) {
                  location.href = that.redirectUrl
                } else {
                  location.href = getAPI('URL_INDEX')
                }
              } else {
                that.$message.error(response.data.msg)
                that.isButtonLoadingLogin = false
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        }
      })
    },
    buttonEnterLogin() {
      this.onSubmitLogin()
    }
  },
  created() {
    // 获取跳转Url
    this.redirectUrl = this.$route.query.url
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background-color: #373d41 !important;
}
.el-header {
  padding: 20px;
}
.el-footer {
  padding: 20px;
}
.el-main {
  padding: 0;
}
.el-menu {
  border-right: 0;
}
</style>
